<template>
	<div class="container" v-title data-title='已推荐客户'>
		<Header title="已推荐客户"></Header>
		<div class="container-indexed-list">
			<div class="indexed-list-search">
				<form @click="handleFormSubmit()">
					<input type="search" v-model="newItem" @focus="handleFocus" @blur="handleBlur"/>
				</form>
				<i class="fa fa-search indexed-search"></i>
				<div class="header-placeholder">
					<i class="fa fa-search"></i>
					<span>搜索</span>
				</div>
			</div>
			<div class="indexed-list-inner">
				<div class="indexed-addBtn">
					<a href="javascript:;" class="recommend-customers-btn"  @click="toAddCustomer()">
						<img src="../../assets/images/addIcon.png">新增客户
					</a>
				</div>
				<ul>
					<li class="view-childen-list" v-for="(item, index) in customerLists" @click="toAddCustomerLink(item)" :class="{active:item.isChecked}">
						<div class="template-row-list">
							<label class="label-title">{{item.name}}</label>
							<div class="row-content">{{item.mobile}}</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
				</ul>
			</div>
		</div>
		<div class="fixed-footer footer-info" id="fixedFooter">
			<div class="template-footer-list">
				<div class="template-footer-left">
					<div class="parallel-line-two">
						<p class="title">{{premisesName.name}}</p>
						<p class="info-num">已选择客户<span class="num">{{premisesName.number}}</span>人</p>
  					</div>
				</div>
				<div class="template-footer-right">
					<button class="btn btn-primary" @click="integrationData()">推荐</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				newItem:'',
				premisesName:{
					name:'',
					number:0,
                    protectTime:'',
                    specialTime:''
				},
				customerLists:[]
			}
		},
		watch: {
			newItem: function(val,oldVal){
				this.initPremises()
			}
		},
		components: {},
		mounted: function() {
			this.initPremises();
			$("#goble_menu_div").hide();
			$(".indexed-list-search").click(function(){
			$(this).addClass("active");
				$(".indexed-list-search input").focus();
			})
			$(".indexed-list-search input").blur(function(){
			  if($(this).val().length < 1){
			  	$(".indexed-list-search").removeClass("active");
			  };
			});
			var wHeight = $(window).height();
			$(".container-indexed-list").css("height",wHeight+"px")
			$(".indexed-list-inner").css("height",(wHeight-40)+"px")
			$("body").scrollTop(0)
		},
		methods: {
			initPremises() {
				var _self = this;
				var params = {
					premisesId: this.$route.params.id,
					searchContent:this.newItem
				};
				var body = {};
				body.params = params;
				var url = this.utilHelper.apiUrl + "/api/getHasCPcusList";
				this.$http.post(url, body).then((response) => {
					var body = response.body;
					this.customerLists = [];
					if(body.result==1){
						var customerList = body.resData.customerListByStaffIdResDto.customerList;
						if(customerList){
							for(var i=0; i<body.resData.customerListByStaffIdResDto.customerList.length;i++){
					            _self.customerLists.push({
					              name:body.resData.customerListByStaffIdResDto.customerList[i].name,
					              mobile:body.resData.customerListByStaffIdResDto.customerList[i].mobile,
					              gender:body.resData.customerListByStaffIdResDto.customerList[i].gender,
					              email:body.resData.customerListByStaffIdResDto.customerList[i].email,
					              isChecked:false
					            })
					        }
						}
						_self.premisesName.name = body.resData.customerListByStaffIdResDto.premisesName;
						_self.premisesName.protectTime = body.resData.customerListByStaffIdResDto.protectTime;
						_self.premisesName.specialTime = body.resData.customerListByStaffIdResDto.specialTime;
					}
				}, (response) => {
				});
			},
			toAddCustomer() {
				this.$router.push({name: 'addCustomer', params: {id:this.$route.params.id,name: this.premisesName.name,protectTime:this.premisesName.protectTime,specialTime:this.premisesName.specialTime}});
			},
			toAddCustomerLink(item){
				var _self = this;
				item.isChecked = !item.isChecked
				var numL = 0;
				for(var j=0;j<_self.customerLists.length;j++){
					if(_self.customerLists[j].isChecked){
						numL++;
					}
				}
				_self.premisesName.number = numL;
			},
			integrationData() {
				var _self = this;
				var customerSubmitList = [];
				var oNum =0;
				for(var ii=0; ii<_self.customerLists.length; ii++){
					var customer = _self.customerLists[ii];
					if(customer.isChecked){
						delete customer.email;
						delete customer.isChecked;
						customerSubmitList[oNum] = customer;
						oNum++;
					}
				}


				if(!oNum){
					layer.msg("请选择客户",{
						time: 2000
					});
					return false;
				}

				var params = {};
				params.staffId = window.sessionStorage.getItem(_self.utilHelper.appAgency+"_userId");
				params.customerList = JSON.parse(JSON.stringify(customerSubmitList));
				params.premisesId = this.$route.params.id
				var body ={};
				body.params = params;
				var url = _self.utilHelper.apiUrl + "/api/addReport";
				_self.$http.post(url,body).then((response) => {
					var body = response.body;
						var resData = body.resData;
						var errorMsg = body.errorMsg;
			   			if(body.result == 1){
			   				var returnMsg = JSON.parse(resData.resultMsg);
							var successCount = returnMsg.successCount;
							var failCount = returnMsg.failCount;
							var failMsg = returnMsg.failMsg;
			   				var successCountMsg = "成功["+successCount+"]条";
			   				var failCountMsg = "失败["+failCount+"]条";
			   				if(successCount == 0){
			   					_self.showRecommend = true;
			   					layer.msg(failMsg, {
				   					time:3000
				   				});
			   				}else{
			   					if(failCount == 0 && successCount > 0){
			   						layer.msg("提交成功", {
										time: 2000
									}, function(){
										_self.$router.push({
											path: '/declare'
										})
									}); 
			   					}else{
			   						layer.msg(successCountMsg+"\n"+failCountMsg+"\n"+failMsg, {
										time: 2000
									}, function(){
										_self.$router.push({
											path: '/declare'
										})
									}); 
			   					}
			   				} 	
		   			}else{
		   				layer.msg("操作失败:"+body.errorMsg,{
		   					time:2000
		   				});
		   			}
				});
			},
			handleFormSubmit(event){
				event.preventDefault();
			},
			handleFocus:function(){
				document.getElementById("fixedFooter").style.display="none";
			},
			handleBlur:function(){
				document.getElementById("fixedFooter").style.display="block";
			}
		}
	}
</script>
<style scoped>
	.template-row-list{padding-left: 130px;}
	.template-row-list .label-title{width: 130px;}
</style>